<template>
  <div class="layout">
    <div class="main-box">
      <div class="tit">熔炼生产记录</div>

      <div class="searcher-box">
        <div class="inp">
          <div class="inpH">开始时间</div>
          <el-date-picker
            v-model="startDate"
            type="datetime"
            placeholder="选择开始时间"
            class="picker"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </div>
        <div class="inp">
          <div class="inpH">结束时间</div>
          <el-date-picker
            v-model="endDate"
            type="datetime"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </div>
        <div class="inp">
          <div class="inpH">合金牌号</div>
          <el-autocomplete
            :style="{ width: '220px' }"
            v-model="modelName"
            :fetch-suggestions="querySearch1"
            placeholder="请输入合金牌号"
            @select="handleSelect"
          >
            <template #default="{ item }">
              {{ item.modelName }}
            </template>
          </el-autocomplete>
        </div>
        <el-button
          type="primary"
          icon="search"
          style="width: 80px"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          icon="refresh"
          style="width: 80px"
          @click="reset"
        >
          重置
        </el-button>
      </div>

      <div class="btn-list">
        <div class="left-btns">
          <el-button
            type="primary"
            v-if="search == true"
            class="ret"
            @click="handleReturn"
            icon="House"
            >返回</el-button
          >
          <el-button
            v-else
            type="primary"
            icon="plus"
            style="width: 100px; margin-right: 6px"
            @click="handleAdd"
          >
            添加
          </el-button>
          <el-button icon="delete" @click="handleDelete" type="danger"> 删除 </el-button>
          <el-button icon="refresh" @click="handleRefresh" type="success">
            刷新
          </el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="540"
          @selection-change="handleSelectionChange"
          :default-sort="{ prop: 'furnaceDate', order: 'descending' }"
          class="custom-table"
        >
          <el-table-column fixed type="selection" width="40" />
          <el-table-column prop="furnaceNumber" label="炉号" width="150" sortable>
          </el-table-column>
          <el-table-column
            prop="furnaceDate"
            label="生产时间"
            width="170"
            sortable
          >
          </el-table-column>
          <el-table-column prop="modelName" label="合金牌号" width="120">
          </el-table-column>
          <el-table-column prop="internalModel" label="内部牌号" width="100">
          </el-table-column>
          <el-table-column
            prop="totalConsumed"
            label="原材料总投入量"
            width="130"
          >
          </el-table-column>
          <el-table-column prop="output" label="总产出" width="100">
          </el-table-column>
          <el-table-column prop="avgLoss" label="平均损耗" width="100">
            <template #default="{ row }">
              <span :style="{ color: row.avgLoss > 50 ? 'red' : '' }">
                {{ row.avgLoss }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="outputRatio" label="产出率" width="70">
            <template #default="{ row }">
              <span :style="{ color: row.outputRatio < 0.9 ? 'red' : '' }">
                {{ row.outputRatio }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="原材料列表" width="290">
            <template #default="scope">
              <span>
                <template
                  v-for="(value, name, index) in scope?.row.rawMaterials"
                >
                  <span v-if="index < 5" :key="name">
                    {{ name }}:{{ value }}{{ " " }}
                  </span>
                </template>
                <span
                  v-if="Object.keys(scope?.row.rawMaterials || {}).length > 5"
                  >......</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleEdit(scope?.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleRefresh"
          v-if="search == false"
          v-model:current-page="pageNum"
          :page-sizes="[30]"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>

      <el-dialog
        title="添加熔炼记录"
        v-model="dialogFormVisible"
        :before-close="reset1"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
      >
        <div class="form-box">
          <div class="col">
            <div class="ys">
              <div class="wz">合金牌号</div>
              <el-autocomplete
                :style="{ width: '280px' }"
                v-model="form.modelName"
                :fetch-suggestions="querySearch1"
                placeholder="请输入合金牌号"
                @select="handleSelect1"
                clearable
              >
                <template #default="{ item }">
                  {{ item.modelName }}
                </template>
              </el-autocomplete>
            </div>
            <div class="ys">
              <div class="wz">生产时间</div>
              <el-date-picker
                v-model="form.furnaceDate"
                type="datetime"
                placeholder="选择时间"
                style="width: 280px"
                value-format="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">总投入量</div>
              <el-input
                class="sr"
                placeholder="请输入原材料总投入量"
                v-model="form.totalConsumed"
              >
                <template #append>
                  <el-button @click="count(form)" class="calc-btn"
                    >计算</el-button
                  >
                </template>
              </el-input>
            </div>
            <div class="ys">
              <div class="wz">总产出量</div>
              <el-input
                class="sr"
                placeholder="请输入熔炼总产出量(选填)"
                v-model="form.output"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">原材料列表</div>
              <div class="sr">
                <el-input
                  class="ylm"
                  v-model="input.name"
                  placeholder="原料名"
                ></el-input>
                <el-input
                  class="ylm"
                  v-model="input.ratio"
                  placeholder="重量(无单位)"
                ></el-input>
                <div class="ad" @click="push">+</div>
              </div>
            </div>
            <div class="ys"></div>
          </div>
          <div class="ylb">
            <div
              class="ylb1"
              v-for="(value, name) in form.rawMaterials"
              :key="name"
            >
              {{ name }}:{{ value }}
              <div class="pop" @click="pop(name)">-</div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitA">确 定</el-button>
          <el-button @click="reset1">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="更新熔炼记录"
        v-model="dialogFormVisible1"
        :before-close="reset2"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
      >
        <div class="form-box">
          <div class="col">
            <div class="ys">
              <div class="wz">合金牌号</div>
              <el-autocomplete
                :style="{ width: '280px' }"
                v-model="edit1.modelName"
                :fetch-suggestions="querySearch1"
                placeholder="请输入合金牌号"
                @select="handleSelect2"
                clearable
              >
                <template #default="{ item }">
                  {{ item.modelName }}
                </template>
              </el-autocomplete>
            </div>
            <div class="ys">
              <div class="wz">生产时间</div>
              <el-date-picker
                v-model="edit1.furnaceDate"
                type="datetime"
                placeholder="选择时间"
                style="width: 280px"
                value-format="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">总投入量</div>
              <el-input
                class="sr"
                placeholder="请输入原材料总投入量"
                v-model="edit1.totalConsumed"
              >
                <template #append>
                  <el-button @click="count(edit1)" class="calc-btn"
                    >计算</el-button
                  >
                </template>
              </el-input>
            </div>
            <div class="ys">
              <div class="wz">总产出量</div>
              <el-input
                class="sr"
                placeholder="请输入熔炼总产出量(选填)"
                v-model="edit1.output"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="col">
            <div class="ys">
              <div class="wz">原材料列表</div>
              <div class="sr">
                <el-input
                  class="ylm"
                  v-model="input.name"
                  placeholder="原料名"
                ></el-input>
                <el-input
                  class="ylm"
                  v-model="input.ratio"
                  placeholder="重量(无单位)"
                ></el-input>
                <div class="ad" @click="push1">+</div>
              </div>
            </div>
            <div class="ys"></div>
          </div>
          <div class="ylb">
            <div
              class="ylb1"
              v-for="(value, name) in edit1.rawMaterials"
              :key="name"
            >
              {{ name }}:{{ value }}
              <div class="pop" @click="pop1(name)">-</div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitB">确 定</el-button>
          <el-button @click="reset2">取 消</el-button>
        </div>
      </el-dialog>
      <div class="load" v-if="loading">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onBeforeMount,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import request from "@/utils/request";
import { useRoute } from "vue-router";
export default defineComponent({
  setup() {
    const state = reactive({
      operatorId: 1,
      operatorName: "",
      loading: false,
      search: false,
      time: "",
      startDate: "",
      endDate: "",
      modelName: "",
      pages: 1,
      pageNum: 1, //当前页号
      pageSize: 30,
      total: 20,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: "200px",
      tableData: [],
      form: {
        //添加用表
        furnaceDate: "",
        modelId: "",
        modelName: "",
        output: "",
        totalConsumed: "",
        rawMaterials: {},
      },
      edit: {}, //编辑用表
      edit1: {}, //保存修改前的副本
      selectedRows: [],
      input: {
        name: "",
        ratio: "",
      },
      restaurants: [],
    });
    const querySearch1 = (queryString, cb) => {
      const results = queryString
        ? createFilter1(queryString, state.restaurants)
        : state.restaurants;
      cb(results);
    };
    const createFilter1 = (queryString, restaurants) => {
      return restaurants.filter((item) =>
        item.modelName.toLowerCase().includes(queryString.toLowerCase())
      );
    };
    const handleSelect = (item) => {
      state.modelName = item.modelName;
    };
    const handleSelect1 = (item) => {
      state.form.modelName = item.modelName;
      state.form.modelId = item.id;
    };
    const handleSelect2 = (item) => {
      state.edit1.modelName = item.modelName;
      state.edit1.modelId = item.id;
    };
    const reset = () => {
      state.modelName = "";
      state.startDate = "";
      state.endDate = "";
    };
    const reset1 = () => {
      state.dialogFormVisible = false;
      state.form.totalConsumed = "";
      state.form.furnaceDate = state.time;
      state.form.modelName = "";
      state.form.output = "";
      state.form.rawMaterials = {};
      state.input.name = "";
      state.input.ratio = "";
    };
    const reset2 = () => {
      state.edit1 = {};
      state.input.name = "";
      state.input.ratio = "";
      state.dialogFormVisible1 = false;
    };
    const handleSearch = async () => {
      state.loading = true;
      try {
        const response = await request({
          method: "post",
          url: "/product/furnace/records/page",
          data: {
            modelName: state.modelName,
            startDate: state.startDate.split(" ").join("T"),
            endDate: state.endDate.split(" ").join("T"),
          },
          headers: {
            "Content-Type": "application/json",
          },
        });
        if (response.data.success) {
          if (!state.search)
            ElMessage({
              showClose: true,
              message: "查询完成",
              type: "success",
            });
          state.search = true;
          state.tableData = response.data.data.list;
          for (let i = 0; i < state.tableData.length; i++) {
            state.tableData[i].furnaceDate = state.tableData[i].furnaceDate
              .split("T")
              .join(" ");
          }
          state.loading = false;
        } else {
          ElMessage({
            showClose: true,
            message: response.data.errorMsg,
            type: "error",
          });
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    };
    const handleEdit = (row) => {
      state.edit = row;
      state.edit1.id = row.id;
      state.edit1.modelId = row.modelId;
      state.edit1.furnaceDate = row.furnaceDate;
      state.edit1.totalConsumed = row.totalConsumed;
      state.edit1.modelName = row.modelName;
      state.edit1.output = row.output;
      state.edit1.rawMaterials = {};
      for (const key in row.rawMaterials) {
        state.edit1.rawMaterials[key] = row.rawMaterials[key];
      }
      state.dialogFormVisible1 = true;
    };
    const handleSelectionChange = (selected) => {
      state.selectedRows = selected; // 更新选中的行
    };
    const handleSizeChange = (val) => {
      console.log(`每页 ${val} 条`);
    };
    const handleAdd = () => {
      state.form.furnaceDate = state.time;
      state.dialogFormVisible = true;
    };
    const handleDel = async () => {
      const ids = [];
      for (let i = 0; i < state.selectedRows.length; i++) {
        ids.push(state.selectedRows[i].id); // 直接修改正在遍历的数组
      }
      if (
        state.selectedRows.length == state.tableData.length &&
        state.pageNum > 1
      )
        state.pageNum--;
      try {
        const response = await request({
          method: "delete",
          url: "/product/furnace/records",
          data: {
            operatorId: state.operatorId,
            operatorName: state.operatorName,
            ids: ids,
          },
          headers: {
            "Content-Type": "application/json",
          },
        });
        if (response.data.success) {
          ElMessage({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          handleRefresh();
        } else {
          ElMessage({
            showClose: true,
            message: response.data.errorMsg,
            type: "error",
          });
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    };
    const handleDelete = async () => {
      if (state.selectedRows.length == 0) {
        ElMessage({
          showClose: true,
          message: "您还未选择您要删除的记录",
          type: "warning",
        });
      } else {
        ElMessageBox.confirm("选择的记录将被删除,要继续吗?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            handleDel();
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "删除取消",
            });
          });
      }
    };
    const getR = async () => {
      try {
        const response = await request({
          method: "get",
          url: "/product/alloy/models/all",
          headers: {
            "Content-Type": "application/json",
          },
        });
        state.restaurants = response.data.data;
      } catch (error) {
        console.error("请求失败:", error);
      }
    };
    const handleReturn = () => {
      state.search = false;
      handleRefresh();
    };
    const handleRefresh = async () => {
      if (state.search == false) {
        state.loading = true;
        try {
          const response = await request({
            method: "post",
            url: "/product/furnace/records/page",
            data: {
              pageSize: state.pageSize,
              pageNum: state.pageNum,
              startDate: "1970-12-01T12:00:00",
              endDate: "2100-12-30T12:00:00",
            },
            headers: {
              "Content-Type": "application/json",
            },
          });
          state.tableData = response.data.data.list;
          for (let i = 0; i < state.tableData.length; i++)
            state.tableData[i].furnaceDate = state.tableData[i].furnaceDate
              .split("T")
              .join(" ");
          state.total = response.data.data.total;
          state.loading = false;
          getR();
        } catch (error) {
          console.error("请求失败:", error);
        }
      } else handleSearch();
    };
    const submitA = async () => {
      if (
        state.form.furnaceDate === "" ||
        state.form.modelName === "" ||
        Object.keys(state.form.rawMaterials).length === 0 ||
        state.form.totalConsumed === ""
      )
        valid(state.form);
      else {
        try {
          const response = await request({
            method: "post",
            url: "/product/furnace/records",
            data: {
              operatorId: state.operatorId,
              operatorName: state.operatorName,
              modelName: state.form.modelName,
              furnaceDate: state.form.furnaceDate.split(" ").join("T"),
              rawMaterials: state.form.rawMaterials,
              output: Number(state.form.output),
              totalConsumed: Number(state.form.totalConsumed),
            },
            headers: {
              "Content-Type": "application/json",
            },
          });
          if (response.data.success) {
            ElMessage({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
            reset1();
            handleRefresh();
          } else {
            ElMessage({
              showClose: true,
              message: response.data.errorMsg,
              type: "error",
            });
          }
        } catch (error) {
          console.error("请求失败:", error);
        }
      }
    };
    const submitB = async () => {
      if (
        state.edit1.furnaceDate === "" ||
        state.edit1.modelName === "" ||
        Object.keys(state.edit1.rawMaterials).length === 0 ||
        state.edit1.totalConsumed === ""
      )
        valid(state.edit1);
      else {
        try {
          const response = await request({
            method: "put",
            url: "/product/furnace/records",
            data: {
              id: state.edit1.id,
              modelName: state.edit1.modelName,
              furnaceDate: state.edit1.furnaceDate.split(" ").join("T"),
              rawMaterials: state.edit1.rawMaterials,
              output: state.edit1.output,
              totalConsumed: Number(state.edit1.totalConsumed),
            },
            headers: {
              "Content-Type": "application/json",
            },
          });
          if (response.data.success) {
            reset2();
            ElMessage({
              showClose: true,
              message: "编辑成功",
              type: "success",
            });
            handleRefresh();
            state.dialogFormVisible1 = false;
          } else {
            ElMessage({
              showClose: true,
              message: response.data.errorMsg,
              type: "error",
            });
          }
        } catch (error) {
          console.error("请求失败:", error);
        }
      }
    };
    const push = () => {
      if (state.input.name === "") {
        ElMessage({
          message: "请填写您要添加的原材料名",
          type: "warning",
        });
      } else if (state.input.ratio === "" || isNaN(+state.input.ratio)) {
        ElMessage({
          message: "原材料要有一定且合法的重量",
          type: "warning",
        });
      } else {
        state.form.rawMaterials[state.input.name] = Number(state.input.ratio);
        state.input.name = "";
        state.input.ratio = "";
      }
    };
    const pop = (name) => {
      ElMessageBox.confirm("是否要删除该元素?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delete state.form.rawMaterials[name];
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "删除取消",
          });
        });
    };
    const push1 = () => {
      if (state.input.name === "") {
        ElMessage({
          message: "请填写您要添加的原材料名",
          type: "warning",
        });
      } else if (state.input.ratio === "" || isNaN(+state.input.ratio)) {
        ElMessage({
          message: "原材料要有一定且合法的重量",
          type: "warning",
        });
      } else {
        state.edit1.rawMaterials[state.input.name] = Number(state.input.ratio);
        state.input.name = "";
        state.input.ratio = "";
      }
    };
    const pop1 = (name) => {
      ElMessageBox.confirm("是否要删除该元素?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delete state.edit1.rawMaterials[name];
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "删除取消",
          });
        });
    };
    const count = async (obj) => {
      try {
        const response = await request({
          method: "post",
          url: "/product/furnace/records/calculate",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            modelName: obj.modelName,
            totalInput: Number(obj.totalConsumed),
          },
        });
        if (response.data.success) {
          obj.rawMaterials = response.data.data;
          ElMessage({
            showClose: true,
            message: "自动计算完成",
            type: "success",
          });
        } else {
          ElMessage({
            showClose: true,
            message: response.data.errorMsg,
            type: "error",
          });
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    };
    const valid=(obj)=>{
      if (obj.modelName === "") {
        ElMessage({
          message: "合金牌号不能为空",
          type: "warning",
        });
      } else if (obj.furnaceDate==="") {
        ElMessage({
          message: "请选择生产日期",
          type: "warning",
        });
      }else if (obj.totalConsumed==="") {
        ElMessage({
          message: "请填写原材料总投入",
          type: "warning",
        });
      }else if (Object.keys(obj.rawMaterials).length === 0) {
        ElMessage({
          message: "原材料列表不能为空",
          type: "warning",
        });
      }
    };
    onBeforeMount(() => {});
    onMounted(() => {
      state.operatorName=useRoute().params.userName;
      const date = new Date();
      date.setHours(date.getHours() + 8); // 增加 8 小时
      state.time = date
        .toISOString()
        .replace("T", " ")
        .replace(/\.\d+Z$/, "");
      handleRefresh();
    });
    return {
      ...toRefs(state),
      reset,
      reset1,
      reset2,
      handleEdit,
      handleSelectionChange,
      handleSizeChange,
      handleAdd,
      submitA,
      submitB,
      handleDelete,
      handleRefresh,
      handleSearch,
      handleSelect,
      handleSelect1,
      handleSelect2,
      handleReturn,
      querySearch1,
      count,
      push,
      push1,
      pop,
      pop1,
    };
  },
});
</script>

<style  scoped>
.layout {
  width: 100%;
  height: 100%;
  background-color: #f5f6f9;
  padding-top: 20px;
}
.main-box {
  width: 98%;
  min-height: 800px;
  height: auto;
  background-color: #ffffff;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tit {
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  font-size: 20px;
  text-indent: 1em;
}
.searcher-box {
  margin-top: 20px;
  height: 100px;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.inp {
  height: 50px;
  width: 30%;
  display: flex;
  overflow: hidden;
  line-height: 30px;
}
.inpH {
  width: 20%;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
}
.input {
  height: 32px;
  width: 220px;
}
.btn-list {
  border: 1px solid #e1e3e5;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin: 0 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.table-box {
  flex: 1;
  margin: 0 20px;
  border: none;
}
.pagination-box {
  margin: 10px 20px;
  display: flex;
  justify-content: flex-end;
}
.form-box {
  position: relative;
  min-height: 210px;
  height: auto;
}
.col {
  height: 32px;
  display: flex;
  background-color: white;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ys {
  width: 50%;
  display: flex;
  justify-content: space-around;
}
.wz {
  width: 20%;
  line-height: 32px;
  font-weight: 600;
}
.sr {
  display: flex;
  width: 70%;
  height: 32px;
  justify-content: space-around;
}
.el-table {
  --el-table-header-bg-color: var(--el-bg-color-page);
  --el-table-border-color: var(--el-border-color-dark);
  --el-table-header-text-color: var(--el-text-color-primary);
}
.lis {
  height: 32px;
  margin-bottom: 5px;
  font-size: 20px;
  color: white;
  text-indent: 1em;
  background-color: rgba(0, 0, 0, 0.596);
  border-radius: 3px;
}
.zwz {
  text-indent: 1em;
  height: 32px;
  line-height: 32px;
  width: 10%;
}
.ylm {
  width: 40%;
}
.ad {
  color: white;
  background-color: rgb(0, 174, 255);
  height: 32px;
  line-height: 32px;
  text-align: center;
  width: 10%;
  border-radius: 5px;
  font-size: 18px;
}
.ad:hover {
  background-color: rgb(0, 174, 255, 0.6);
  cursor: pointer;
}
.ad:active {
  background-color: rgba(0, 174, 255, 0.8);
}
.ylb {
  margin-left: 110px;
  width: 270px;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  min-height: 60px;
  border: 1px solid grey;
  border-radius: 10px;
  overflow: hidden;
}
.ylb1 {
  position: relative;
  width: 75.74px;
  background-color: rgba(0, 0, 0, 0.644);
  color: white;
  height: 20px;
  margin: 2px;
  border-radius: 2px;
  line-height: 20px;
}
.pop {
  position: absolute;
  text-align: center;
  line-height: 20px;
  color: white;
  height: 20px;
  width: 20px;
  top: 0;
  right: 0;
  background-color: rgba(255, 0, 4, 0.71);
}
.load {
  position: absolute;
  top: 450px;
  left: 800px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.68);
  line-height: 40px;
  text-align: center;
  z-index: 9999;
}
.el-icon.is-loading {
  animation: rotating 2s linear infinite;
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
::v-deep.calc-btn {
  color: white !important;
  background-color: rgb(0, 128, 255) !important;
}
.calc-btn:active {
  transform: scale(0.95); /* 点击时缩小 */
  transition: transform 0.1s;
}
</style>